<template>
    <view class="content" v-if="isShow">
        <view class="u-flex-1" style="overflow: scroll;">
		    <view class="bg">
				<!-- 问诊、挂号、预约  要绑定手机号 -->
				<view class="wrapper">
					<u-swiper :list="bannerx" :height="363" @click="toGuangGao($event, data.slides)"></u-swiper>
					<!-- 极速问诊、预约挂号、报告解读 -->
					<view class="nav" v-if="data.navs && data.navs.length > 0">
						<image v-for="(item, index) in data.navs" :key="index" v-if="index < 3" :src="item.image_uri" 
							class="index-1" @click="openPage(item, index)"></image>
					</view>
					<!-- 项目详情、体检中心 -->
					<view class="nav-2" v-if="data.navs && data.navs.length > 3">
						<image v-for="(item, index) in data.navs" :key="index" v-if="index > 2" :src="item.image_uri"
							class="us-4" @click="openPage(item, index)"></image>
					</view>
					
					<view v-if="data.account && data.account.length > 0">
						<view class="title">
							<view>会员尊享</view>
							<view class="more" @click="toPage(`/pages/vip/vip`)">
								更多
								<u-icon name="arrow-right" color="#b8b8b8" size="24" class="u-m-l-10"></u-icon>
							</view>
						</view>
						<view class="vip">
							<image v-for="(item, index) in data.account" :key="index" :src="item.image_uri" 
								class="vip-img" @click="toPage(`/pages/vip/vip?id=${item.id}`)"></image>
						</view>
					</view>
					
					<view v-if="data.content && data.content.length > 0">
						<view class="title u-p-t-30 u-p-b-6">
							<view>健康播报</view>
							<view class="more" @click="toPage(`/pages/health/list`)">
								更多
								<u-icon name="arrow-right" color="#b8b8b8" size="24" class="u-m-l-10"></u-icon>
							</view>
						</view>
						
						<view class="item" v-for="(item, index) in data.content" :key="index"
							 @click="toPage(`/pages/health/details?id=${item.id}`)">
							<view class="item-left">
								<view class="i-tit u-line-2">{{item.title}}</view>
								<view class="i-sub">{{item.ftitle}}</view>
							</view>
							<image :src="item.image_uri" class="item-img"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="rate" v-if="data.evaluates && data.evaluates.length > 0">
				<view class="title">
					<view>会员评价</view>
					<view class="more" @click="toPage(`/pages/evaluate/evaluate`)">
						更多
						<u-icon name="arrow-right" color="#b8b8b8" size="24" class="u-m-l-10"></u-icon>
					</view>
				</view>
				<view class="rate-i" v-for="(item, index) in data.evaluates" :key="index">
					<view class="info" v-if="item.members">
						<image :src="item.members.image_uri" class="avatar"></image>
						<view class="u-flex-1">
							<view class="name">{{item.members.nickname}}</view>
							<u-rate v-model="item.level" size="24" active-color="#fcc206" disabled></u-rate>
						</view>
					</view>
					<view class="text" v-if="item.content">{{item.content}}</view>
					<view class="spec" v-if="item.title">
						规格：{{item.title}}
					</view>
				</view>
			</view>
	    </view>
		
		<view class="footer">
			<view class="btn" @click="toPage(`/pages/settle/settle`)">购买健康管理卡</view>
		</view>
		
		<!-- 底部导航 -->
		<u-tabbar v-model="current" :list="tab_list" inactive-color="#5d5f6a" active-color="#00b6bc" 
			:border-top="false" zIndex="999" @change="tabbarChange"></u-tabbar>
		
		<!-- 问诊须知 -->
		<u-mask :show="show_1" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box2">
					<image src="../../static/image/pop_bg.png" class="pop-bg"></image>
		            <view class="pop-up">
		                <view class="pop-tit">{{content.title}}</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									<u-parse :html="content.content" @linkpress="linkpress"></u-parse>
								</view>
							</scroll-view>
						</view>
						<view class="pop-btns">
							<view class="pop-b-l" @click="show_1 = false">取消</view>
							<view class="pop-b-r" @click="keepConsult">继续咨询</view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show_1 = false"></image>
		        </view>
		    </view>
		</u-mask>
		
		<!-- 极速问诊 -->
		<u-mask :show="show_2" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
					<image src="../../static/image/jswz.png" class="jswz"></image>
		            <view class="pop-up2">
		                <view class="pop-tit">此功能限一诺健康管理卡会员使用</view>
						<view class="pop-btns">
							<view class="pop-b-l" @click="show_2 = false">取消</view>
							<view class="pop-b-r" @click="toPage(`/pages/settle/settle`)">立即购买</view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show_2 = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
	import {
	    ajaxPost,
	    isNull,
	    getSync,
	    getParam,
	    setSync
	} from '../../static/js/common.js'
    export default {
        data() {
            return {
                bannerx: [],
				show_1: false,
				show_2: false,
				content: {},
				data: {},
				info: {},
				current: 0, //底部导航索引
				tab_list: [{
						iconPath: "/static/icon/tab_2.png",
						selectedIconPath: "/static/icon/tab_1.png",
						text: '健康管理',
						customIcon: false,
						pagePath: "/pages/tabbar/index"
					},
					{
						iconPath: "/static/icon/tab_4.png",
						selectedIconPath: "/static/icon/tab_3.png",
						text: '客服',
						customIcon: false,
						pagePath: "/pages/tabbar/kefu"
					},
					{
						iconPath: "/static/icon/tab_6.png",
						selectedIconPath: "/static/icon/tab_5.png",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/tabbar/mine"
					},
				],
				isShow: false,
            };
        },
        onLoad() {
            this.getContent()
			
			if (!this.$getSync('userToken')) {
				setTimeout(() => {
				    this.login();
				}, 300);
			}
        },
		onShow() {
			if (this.$getSync('userToken')) {
				this.getInfo()
				this.getIndexData()
			}
			
		},
        methods: {
			login() {
			    const _this = this;
			    let url = window.location.href;
			    console.log('code', getParam('code'))
			    if (getParam('code')) {
			        let code = getParam('code');
			        _this.code(code)
			    } else {
			        window.location.href =
			            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx552129804846d230&redirect_uri=' +
			            encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect';
			    }
			},
			
			code(code) {
			    ajaxPost('weixin', {
			        code: code, //微信授权码
			    }).then(res => {
			        console.log('weixin', res)
			        if (res.status == 0) {
			            uni.setStorageSync('userToken', res.data.userToken); //存token
			            
						this.getIndexData()
						this.getInfo()
			        }
			    })
			},
			
			linkpress(e) {
				console.log('linkpress',e)
				this.show_1 = false
				this.$gTo(`/pages/other/xieyi`)
			},
			
			// 跳网址
			toGuangGao(e, array) {
			    if (!uni.getStorageSync('userToken')) {
			        uni.navigateTo({
			            url: '../login/login'
			        });
			    } else {
			        if (array[e].url) {
						this.$gTo(`/pages/pay/web?url=${array[e].url}`)
			        }
			    }
			},
			
			getInfo() {
				this.$ajax('members', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
						this.$setSync('MOBILE', ret.data.mobile);
						this.info = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 极速问诊
			doConsult() {
				this.$ajax('is_inquirys', {
				    userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
				        this.show_1 = true
					} else {
						this.$toast(ret.message);
						this.show_2 = true
					}
				});
			},
			
			// 继续咨询
			keepConsult() {
				this.$ajax('add_inquirys', {
				    userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
				        this.show_1 = false
						window.location.href = 'https://work.weixin.qq.com/kfid/kfc7b92dee1aa6e7fe5';
						
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            toPage(url) {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/loginH`)
				} else {
					this.$gTo(url)
				}
			},
			
			// index=0极速问诊、1预约挂号、2报告解读、3项目详情、4体检中心
			openPage(item, index) {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/loginH`)
				} else {
					if (index == 0 || index == 1) {
						if (!this.$getSync('MOBILE')) {
							this.$confirm('请先注册绑定手机号', data => {
								this.$gTo(`/pages/login/binephone`)
							})
						} else {
							if (index == 0) {
								this.doConsult()
							} else if (index == 1) {
								if (this.info.exam_nums > 0) {
									this.$gTo(`/pages/register/register`)
								} else {
									this.show_2 = true
								}
							}
						}
					} else if (index == 2) {
						this.$gTo(`/pages/report/list`)
					} else if (index == 3) {
						this.$gTo(`/pages/details/details`)
					} else if (index == 4) {
						this.$gTo(`/pages/medical/list`)
					}
				}
			},
			
			// 获取首页数据
			getIndexData() {
				this.$ajax('index', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
						
			            this.bannerx = []
						if (this.data && this.data.slides && this.data.slides.length > 0) {
							this.data.slides.forEach(cur => {
								this.bannerx.push({image: cur.image_uri})
							})
						}
						this.isShow = true
					} else {
						this.$toast(ret.message);
						setTimeout(() => {
						    this.login();
						}, 300);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 7,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			//切换底部导航
			tabbarChange(e) {
				this.current = e;
			},
        }
    };
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.footer{
		width: 750rpx;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		background: linear-gradient(to right,#33d0c3,#01b8bd);
		border-radius: 50rpx;
		margin: 20rpx;
	}
	
	
	
    page{
        background-color: #f6f7fa;
    }
	.bg{
		background: linear-gradient(to right, #01aeba,#03c1aa);
		padding-top: 40rpx;
	}
	
	.navbar{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		// font-weight: bold;
		color: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	.logo{
		width: 59rpx;
		height: 64rpx;
		margin-right: 10rpx;
	}
	.wrapper{
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 25rpx 18rpx 0;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40rpx;
	}
	.index-1{
		width: 225rpx;
		height: 221rpx;
		box-shadow: 1.5px 1.5px 15px #efefef;
	}
	.nav-2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
	}
	.us-4{
		width: 347rpx;
		height: 180rpx;
	}
	
	
	.title{
		padding: 50rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
	}
	.more{
		font-size: 24rpx;
		font-weight: normal;
		color: #b8b8b8;
	}
	.vip{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}
	.vip-img{
		width: 220rpx;
		height: 225rpx;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
	}
	.vip-img:nth-child(3n) {
		margin-right: 0;
	}
	
	
	.item{
		padding: 40rpx 0;
		border-bottom: 2rpx solid #eaebf0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item-left{
		flex: 1;
		padding-right: 20rpx;
	}
	.i-tit{
		font-size: 30rpx;
		font-weight: bold;
	}
	.i-sub{
		font-size: 24rpx;
		color: #81849f;
		padding-top: 14rpx;
		width: 486rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item-img{
		width: 196rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}
	
	.rate{
		padding: 0 20rpx 30rpx;
	}
	.rate-i{
		padding: 25rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.avatar{
		width: 71rpx;
		height: 71rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
	}
	.text{
		padding: 25rpx 0;
		font-size: 26rpx;
		word-break: break-all;
		white-space: pre-line;
	}
	.spec{
		padding: 16rpx 20rpx;
		background-color: #f6f8fb;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #35527e;
		word-break: break-all;
		white-space: pre-line;
	}
	
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 616rpx;
		height: 670rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-bg{
		width: 616rpx;
		height: 293rpx;
	}
	.pop-up {
	    width: 616rpx;
		height: 670rpx;
	    padding: 50rpx 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.pop-up2{
		width: 616rpx;
		// height: 670rpx;
		padding: 50rpx 40rpx;
	}
	.jswz{
		width: 616rpx;
		height: 250rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-btns{
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pop-btns>view{
		width: 236rpx;
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;
	}
	.pop-b-l{
		color: #5c5c5c;
		background-color: #f4f4f4;
	}
	.pop-b-r{
		color: #fff;
		background-color: #00b5bc;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}


</style>
